<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/layui/css/style.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../layuiadmin/style/admin.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="../plugins/zTree/css/metroStyle/metroStyle.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="../plugins/toastr/toastr.min.css?v=${.Config.basic.version}">
    <link rel="stylesheet" href="../plugins/font-awesome-4.7.0/css/font-awesome.min.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2575369_9n08winu4t8.css?spm=a313x.7781069.1998910419.40&file=font_2575369_9n08winu4t8.css" media="all">
    <link rel="stylesheet" href="../css/ztree.css?v=${.Config.basic.version}" media="all">
    <style>
        .layui-fluid {
            padding: 15px;
        }
        .contextmenu {
            border-bottom: 0;
            background: #4958b9;
            position: absolute;
            list-style: none;
            margin: 0;
            padding: 0;
            display: none;
            z-index: 99999;
        }

        .contextmenu li{
            width: 160px;
        }

        .contextmenu li a {
            display: block;
            padding: 5px 20px;
            border-bottom: 1px solid #aaaaaa21;
            cursor: pointer;
            color: #fff;
        }
        .contextmenu li a:hover {
            background: #0f1644;
            color: #fff;
        }
        .toolbar{
            /*text-align: right;*/
            background: #fff;
        }

        .layui-card-body {
            position: relative;
            /*padding: 0;*/
            line-height: 24px;
        }
        .left-content .bg{
            width: 100%;
            height: 100%;
            background: url("/img/base/bg.png") no-repeat;
            background-size:100% 100%;
        }

        .left-content .root_block{
            width: 100%;
            height: 100%;
            background-color: #ccc;
        }

        .left-content .net_group_block{
            width: 100%;
            height: 100%;
            /*background-color: #f2f2f2;*/
        }
        .left-content .net_node_block{
            width: 100%;
            height: 100%;
            /*background-color: #f2f2f2;*/
        }
        .left-content .net_rack_block{
            width: 100%;
            height: 100%;

        }

        .scroll{
            overflow: auto;
        }
        .layui-form-select dl {
            max-height: 150px;
        }
    </style>

    <!-- <style>
        .layui-table-view .layui-table td, .layui-table-view .layui-table th {
            padding: 5px 0;
            border-top: 1px solid #404453;
            border-left: 1px solid #404453;
            border-bottom: 1px solid #404453;
            border-right: 1px solid #404453;
        }
    </style> -->
</head>
<body>
<div class="">
    <div style="display: flex;">
        <div style="width: 280px; ">
            <div class="layui-card tree-div">

                <div class="">
                    <div class=" " >
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
        <div style="width: calc(100% - 280px);float: right; " >
            <div class="layui-card">

                <div class="layui-card-body">
                    <div class="left-content " >
                        <div class="bg" id="chart"></div>
                        <div style="display: none;" class="root_block">
                        </div>

                        <div style="display: none; " class="house_block">
                            <div class="toolbar">
                                <div class="layui-btn-group" style="float: right">
                                    <button type="button"  onclick="onAdd();" class="action-edit layui-hide layui-btn layui-btn-primary layui-btn-sm"><i class="fa fa-plus layui-text-light"></i></button>
                                </div>
                            </div>
                            <blockquote class="layui-elem-quote" id="id-title"></blockquote>
                            <table class="layui-hide" id="table" lay-filter="table"></table>

                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>



<script src="../plugins/layui/layui.js"></script>
<script src="../plugins/jquery/jquery-3.6.0.js?v=${.Config.basic.version}"></script>
<script src="../plugins/zTree/js/jquery.ztree.core.min.js?v=${.Config.basic.version}"></script>
<script src="../plugins/zTree/js/jquery.ztree.excheck.js?v=${.Config.basic.version}"></script>
<script src="../plugins/zTree/js/jquery.ztree.exedit.js?v=${.Config.basic.version}"></script>
<script src="../plugins/jquery.slimscroll.min.js"></script>
<script src="../plugins/toastr/toastr.min.js"></script>
<script src="../plugins/moment.min.js"></script>
<script src="../js/utils.js"></script>
<script src="../js/verify.js"></script>
<script src="../js/func.js?v=${.Config.basic.version}"></script>

<script>
    var lay_index=null;
    var zTree=null;
    var table=null;
    var laydate=null;
    var form=null;
    var element=null;
    //var transfer=null;
    var actions=null;
    var token = window.localStorage.getItem("token");
    var user_info=JSON.parse(window.localStorage.getItem("user_info"));
    var func_url="${.func_url}";
    var actions=[];
    var selectedTreeNode=null;
    var menu=null;
    var allData=[];
    var device_define=[];
    //var ac_define=[];

    var lay_index=null;

    var last_node=null;


    token = 'Bearer ' + token;
    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','form','iconPicker'], function(){
        $ = layui.$;
        form = layui.form;
        table = layui.table;

        toastr.options = {
            "closeButton": false, //是否显示关闭按钮
            "debug": false, //是否使用debug模式
            "positionClass": "toast-top-center",//弹出窗的位置
            "showDuration": "300",//显示的动画时间
            "hideDuration": "1000",//消失的动画时间
            "timeOut": "2000", //展现时间
            "extendedTimeOut": "1000",//加长展示时间
            "showEasing": "swing",//显示时的动画缓冲方式
            "hideEasing": "linear",//消失时的动画缓冲方式
            "showMethod": "fadeIn",//显示时的动画方式
            "hideMethod": "fadeOut" //消失时的动画方式
        };

        form.verify({
            verify_ip:verify_ip,
        });

        $.ajax({
            type: 'GET',
            url: '../Api/User/Actions',
            data: {func_url:func_url},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                console.info(data)
                actions=data.data;
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载操作信息失败');
            }
        });

        $.ajax({
            type: 'GET',
            url: '../Api/DeviceDefine',
            data: {},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (res) {
                console.info(res)
                if(res.code>=0){
                    device_define = res.data;
                    //renderSelect();
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载设备类型失败');
            }
        });



        $.ajax({
            type: 'GET',
            url: '../Api/User/Actions',
            data: {func_url:func_url},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                console.info(data)
                actions=data.data;
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载操作信息失败');
            }
        });

        form.on('submit(btn_save)', function(data){
            console.info(data.field);
            data.field.device_addr = data.field.device_addr.trim();
            var request = "";
            if(data.field.id.length>0){
                request = "PUT";
            }else{
                request = "POST";
            }
            layer.load(1);
            $.ajax({
                type: request,
                url: '../Api/Device',
                data: data.field,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (res) {
                    if(res.code>=0){
                        layer.close(lay_index);
                        toastr.success("保存成功");
                        showDevices();
                    }else{
                        toastr.warning(res.msg, "异常");
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                },
                complete: function(XMLHttpRequest, textStatus) {
                    layer.closeAll('loading');
                },

            });
        });

        //加载tree
        loadTree();

        resizeElement();
    });

    var tree_setting = {
        view: {
            dblClickExpand: false,
            fontCss: getFont,
            nameIsHTML: true,
        },
        callback: {
            onClick: treeOnClick,
            //onRightClick: OnRightClick,
            //拖拽时鼠标放开事件
            //onDrop: treeOnDrop,
            //beforeDrag: treeBeforeDrag,
            //beforeExpand: zTreeBeforeExpand
            onExpand:treeOnExpand,
            onCollapse:treeOnCollapse
        },
        view: {
            dblClickExpand: false,
            fontCss: getFont,
            nameIsHTML: true,
            //addHoverDom: addHoverDom,
            //removeHoverDom: removeHoverDom,
            //addDiyDom:addHoverDom
        },
        edit: {
            enable: true,
            showRemoveBtn: false,
            showRenameBtn: false,
            drag:{
                autoExpandTrigger: false,
                isCopy: false,
                prev: false,
                next: false,
                inner: false
            }
        },
    };


    function getFont(treeId, node) {
        return node.font ? node.font : {};
    }

    function treeOnClick(event, treeId, treeNode) {
        selectedTreeNode=treeNode;
        resizeElement();
        console.info(selectedTreeNode);
        if(selectedTreeNode.type=="root"){
            $(".left-content").children("div").hide();
            $(".bg").show();
            toastr.info("请选择栏舍");
            //on_view_root();
        } else if(selectedTreeNode.type=="farm"){
            $(".left-content").children("div").hide();
            $(".bg").show();
            toastr.info("请选择栏舍");

        }else if(selectedTreeNode.type=="house"){
            $(".left-content").children("div").hide();
            $(".house_block").show();
            $("#id-title").html(selectedTreeNode.name);
            showDevices();
        } else{
            $(".left-content").children("div").hide();
            $(".bg").show();
        }

    }

    function treeOnExpand(event, treeId, treeNode) {
    }

    function treeOnCollapse(event, treeId, treeNode) {
        console.info(treeNode);
    }
    function deepCopy(obj) {
        if (typeof obj != 'object') {
            return obj;
        }
        var newobj = {};
        for (var attr in obj) {
            newobj[attr] = deepCopy(obj[attr]);
        }
        return newobj;
    }

    function renderSelect(){
        //下拉
        var html="<option value='' ></option>";
        for(var i=0;i<device_define.length;i++){
            var selectd="";
            html+="<option "+selectd+" value=\""+device_define[i].device_type+"\">"+device_define[i].device_desc+"</option>";

        }

        $("select[name='device_type']").html(html);


        form.render('select');
    }

    function showDevices() {
        table.render({
            elem: '#table'
            ,url: "../Api/Device/ByHouse"
            ,height: 'full-115'
            ,method:'GET'
            ,headers : {'Authorization': 'Bearer '+window.localStorage.getItem("token")}
            ,where: {houseid:selectedTreeNode.id}
            ,page: false
            ,limit:30000
            //,toolbar: '#table_toolbar' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['']
            ,title: ''
            ,even:false
            ,size: 'sm' //小尺寸的表格
            // ,skin: 'nob' //无框风格
            ,cols: [[
                //{type: 'checkbox', fixed: 'left'}

                {field:'device_type', title:'设备类型',width:110, sort: false,templet: function(d) {
                        var html = "";
                        for(var i=0;i<device_define.length;i++){
                            if(d.device_type == device_define[i].device_type){
                                html = device_define[i].device_desc;
                                break;
                            }
                        }
                        return html;
                    }}
                ,{field:'device_addr', title:'网关SN',width:100, sort: false}
                // ,{field:'default_hnum_prefix', title:'栏位排',width:90, sort: false}
                

                // ,{field:'remark', title:'单元名称', sort: false}
                ,{field:'node_num', title:'子设备数',width:90, sort: false}
                ,{field:'online', title:'在线状态',width:90, sort: false,align:'center',templet: function(d){
                            var html = "";
                            if(d.alive){
                                html+="<span class=\"layui-badge-dot layui-bg-blue\"></span> 在线"
                            }else{
                                html+="<span class=\"layui-badge-dot layui-bg-black\"></span>  离线"
                            }
                            return html;
                    }}
                ,{field:'version', title:'版本号', sort: false}

                //,{fixed: 'right', title:'',width:150, toolbar:'#table_action_bar'}
                ,{field:'', title:'操作', sort: false,align:'left',width:200,fixed: 'right', templet: function(d) {
                        var html = "";
                        html += "<a href='#'  onclick='onEdit("+d.id+")' class=\"layui-hide action-edit\" lay-event=\"edit\"><span class=\" layui-text-or \">修改</span></a><span class=\"shortGreyLine layui-hide action-edit\"></span>";
                        html += "<a href='#'  onclick='onDelete("+d.id+")' class=\" layui-hide action-delete\" lay-event=\"delete\"><span class=\" layui-text-or \">删除</span></a><span class=\"shortGreyLine layui-hide action-delete\"></span>";


                        return html;

                    }}
            ]]
            ,done: function(res, curr, count){
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
                var that = this.elem.next();
                allData = res.data;
                res.data.forEach(function (item, index) {
                    //console.log(item.empName);item表示每列显示的数据
                });
            }
        });
    }
    function onAdd() {
        console.info(selectedTreeNode);
        var node_num = 1;
        if(selectedTreeNode.house_type == EMODE_LACTATION_NEW){
            //哺乳
            node_num = 56;
        }else if(selectedTreeNode.house_type == EMODE_NURSE_NEW || selectedTreeNode.house_type == EMODE_FAT_NEW){
            node_num = 28;
        }
        var obj={
            id:'',
            houseid:selectedTreeNode.id,
            device_type:'DMXFGW',
            //acid:'',
            device_addr:'',
            default_hnum_prefix:'',
            node_num:node_num,
            remark:selectedTreeNode.name, //使用默认栏舍名称
        };
        console.info(obj)

        form.val("form",obj);
        layer.open({
            //area: 'auto',
            area:['400px','450px'],
            type: 1,
            offset: '10%',
            shade: 0.3,
            shadeClose:true,
            title: '新增设备', //不显示标题
            content: $('#form'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            btn: ['确定', '取消']
            ,yes: function(index, layero){
                lay_index=index;
                var submit = layero.find("#btn_save");
                submit.click();
            }
            /*,btn2:function(index, layero){
                console.info("选取在线设备");
                layer.open({
                    area:['450px','350px'],
                    type: 1,
                    shade: 0.3,
                    offset: '20%',
                    shadeClose:true,
                    title: '请选取设备', //不显示标题
                    content: $('#form1'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                    btn: ['确定','取消']
                    ,yes: function(index, layero){
                        lay_index=index;

                        var checkStatus = table.checkStatus('table1');
                        if(checkStatus.data.length==0){
                            layer.alert("未选中任何数据");
                        }else{
                            var row = checkStatus.data[0]; //获取选中行的数据
                            //layer.alert(JSON.stringify(row));
                            //$("#device_addr").val(row.device_addr);
                            obj={
                                id:row.id,
                                houseid:selectedTreeNode.id,
                                device_type:row.device_type,
                                device_addr:row.device_addr,
                                remark:row.remark
                            };
                            console.info(obj)
                            form.val("form",obj);
                            layer.close(lay_index);
                        }
                    }
                });
                table.render({
                    elem: '#table1'
                    ,url:'../Api/Device/ForAllocate'
                    ,height: '200'
                    ,method:'GET'
                    ,headers : {'Authorization': 'Bearer '+window.localStorage.getItem("token")}
                    ,where: {houseid:selectedTreeNode.id}
                    ,page: false
                    ,limit:30000
                    //,toolbar: '#table_toolbar' //开启头部工具栏，并为其绑定左侧模板
                    ,defaultToolbar: ['']
                    ,title: ''
                    ,even:false
                    ,size: 'sm' //小尺寸的表格
                    //,skin: 'nob' //无框风格
                    ,cols: [[
                        //{type: 'checkbox', fixed: 'left'}
                        {type: 'radio', fixed: 'left'}
                        //,{type:'numbers'}
                        ,{field:'device_type', title:'设备类型',width:150, sort: false,templet: function(d) {
                                var html = "";
                                for(var i=0;i<device_define.length;i++){
                                    if(d.device_type == device_define[i].device_type){
                                        html = device_define[i].device_desc;
                                        break;
                                    }
                                }
                                return html;
                            }}
                        ,{field:'device_addr', title:'网关SN',width:120, sort: false}
                    ]]
                });
                return false;
            }*/
        });
    }
    function onEdit(id) {
        var matchs = $.grep(allData,function (item) {
            return item.id==id;
        })
        if(matchs.length>0){
            var item  = matchs[0];
            var obj={
                id:item.id,
                houseid:item.houseid,
                //acid:item.acid,
                device_type:item.device_type,
                device_addr:item.device_addr,
                default_hnum_prefix:item.default_hnum_prefix,
                node_num:item.node_num,
                remark:item.remark,
            };
            console.info(obj)

            form.val("form",obj);
            layer.open({
                //area: 'auto',
                area:['400px','450px'],
                type: 1,
                offset: '10%',
                shade: 0.3,
                shadeClose:true,
                title: '修改设备['+item.remark+"]", //不显示标题
                content: $('#form'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
                btn: ['确定', '取消']
                ,yes: function(index, layero){
                    lay_index=index;
                    var submit = layero.find("#btn_save");
                    submit.click();
                }
            });
        }
    }
    function onDelete(id) {
        var matchs = $.grep(allData,function (item) {
            return item.id==id;
        })
        if(matchs.length>0){
            var item  = matchs[0];
            layer.confirm('确定删除'+item.remark+'?', function(index){
                layer.close(index); //再执行关闭
                layer.load(1);
                $.ajax({
                    type: 'DELETE',
                    url: '../Api/Device',
                    data: {id:item.id},
                    beforeSend: function(request) {
                        request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                    },
                    dataType: "json",
                    success: function (res) {
                        if(res.code>=0){
                            toastr.success(res.msg);
                            showDevices();
                        }else{
                            toastr.warning(res.msg, "异常");
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.msg('加载信息失败');
                    },
                    complete: function(XMLHttpRequest, textStatus) {
                        layer.closeAll('loading');
                    },

                });
            });
        }
    }


    function loadTree() {
        layer.load(1);
        $.ajax({
            type: 'GET',
            url: '../Api/Topo',
            data: {},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                //var data=data.data;
                var nodes=setDataIcon(data.data);
                console.info(nodes);
                zTree = $.fn.zTree.init($("#treeDemo"), tree_setting, nodes);
                //zTree.expandAll(true);
                /*var nodes = zTree.getNodesByParam("type", "house", null);
                if(nodes.length>0){
                    const node = nodes[0];
                    console.info(node);
                    zTree.selectNode(node);
                    zTree.setting.callback.onClick(null,null,node);//手动触发onClick事件
                }*/

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载信息失败');
            },
            complete: function(XMLHttpRequest, textStatus) {
                layer.closeAll('loading');
            },
        });

    }


    //设置图标
    function setDataIcon(data){

        for(let i=0; i<data.length; i++){
            var node=data[i];

            node['font']={'color':'#333'};
            if(node.type=='group'){
                //node.name = "";
                node["icon"]="../plugins/zTree/css/metroStyle/img/net.png";
                //node.isParent=true;
                node.open = true;
            }
            else if(node.type=='area'){
                node["icon"]="../plugins/zTree/css/metroStyle/img/area.png";
                //node.isParent=true;
                node.open = true;
            }
            else if(node.type=='farm'){
                node["icon"]="../plugins/zTree/css/metroStyle/img/location.png";
                //node.isParent=true;
                node.open = false;
            }else if(node.type=='house'){
                node["icon"]="../plugins/zTree/css/metroStyle/img/house.png";
                //node.isParent=false;
            }else if(node.type=='unit'){
                node["icon"]="../plugins/zTree/css/metroStyle/img/unit.png";
                //node.isParent=false;
            }
            if(node['children']){
                var data1=node.children;
                setDataIcon(data1);
            }
        }
        return data;
    }
    $(window).resize(function () {
        //console.info('resize')
        resizeElement();
    });
    function resizeElement() {
        $(".tree-div").slimScroll({
            height: $(window).height()-10,
            size: '4px', //组件宽度
            color: '#eee', //滚动条颜色
            position: 'right', //组件位置：left/right
            distance: '0px', //组件与侧边之间的距离
            start: 'top', //默认滚动位置：top/bottom
            opacity: .4, //滚动条透明度
            alwaysVisible: true, //是否 始终显示组件
            disableFadeOut: false, //是否 鼠标经过可滚动区域时显示组件，离开时隐藏组件
            railVisible: true, //是否 显示轨道
            railColor: '#333', //轨道颜色
            railOpacity: .2, //轨道透明度
            railDraggable: true, //是否 滚动条可拖动
            railClass: 'slimScrollRail', //轨道div类名
            barClass: 'slimScrollBar', //滚动条div类名
            wrapperClass: 'slimScrollDiv', //外包div类名
            allowPageScroll: true, //是否 使用滚轮到达顶端/底端时，滚动窗口
            wheelStep: 10, //滚轮滚动量
            touchScrollStep: 200, //滚动量当用户使用手势
            borderRadius: '7px', //滚动条圆角
            railBorderRadius: '7px' //轨道圆角
        });
    }

</script>

<script src="../js/check_screen.js?v=${.Config.basic.version}"></script>

</body>

<form class="layui-form" lay-filter="form" id="form" style="padding: 20px 30px 0 0;display:none;">
    <div class="layui-form-item layui-hide">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="text" name="id" lay-verify="" placeholder="" autocomplete="off" class="layui-input" style="width: 100%">
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <input type="text" name="houseid" lay-verify="required" placeholder="" autocomplete="off" class="layui-input" style="width: 100%">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"> 设备类型 <span class="layui-text-red">*</span></label>
        <div class="layui-input-block">
            <select name="device_type" lay-filter="device_type" lay-verify="required"  lay-verType="tips" lay-search="">
                <option value="DMXFGW" >精准饲喂网关</option>
            </select>
        </div>
    </div>

    <!-- <div class="layui-form-item">
        <label class="layui-form-label"> 栏位排 <span class="layui-text-red">*</span></label>
        <div class="layui-input-block">
            <select name="default_hnum_prefix" lay-filter="default_hnum_prefix" lay-verify=""  lay-verType="tips" lay-search="">
                <option value="" ></option>
                <option value="A" >A排</option>
                <option value="B" >B排</option>
                <option value="C" >C排</option>
                <option value="D" >D排</option>
                <option value="E" >E排</option>
                <option value="F" >F排</option>
                <option value="G" >G排</option>
                <option value="H" >H排</option>
                <option value="I" >I排</option>
                <option value="J" >J排</option>
                <option value="K" >K排</option>
                <option value="L" >L排</option>
                <option value="M" >M排</option>
                <option value="N" >N排</option>
                <option value="O" >O排</option>
                <option value="P" >P排</option>
                <option value="Q" >Q排</option>
                <option value="R" >R排</option>
                <option value="S" >S排</option>
                <option value="T" >T排</option>
                <option value="U" >U排</option>
                <option value="V" >V排</option>
                <option value="W" >W排</option>
                <option value="X" >X排</option>
                <option value="Y" >Y排</option>
                <option value="Z" >Z排</option>
            </select>
        </div>
    </div> -->

    


    <!-- <div class="layui-form-item">
        <label class="layui-form-label">单元名称 <span class="layui-text-red">*</span></label>
        <div class="layui-input-block">
            <input type="text" name="remark" lay-verify="required" lay-verType="tips" placeholder="" autocomplete="off" class="layui-input" style="width: 100%">
        </div>
    </div> -->

    <div class="layui-form-item">
        <label class="layui-form-label">设备SN <span class="layui-text-red">*</span></label>
        <div class="layui-input-block">
            <input type="text" id="device_addr" name="device_addr" maxlength="8" lay-verify="number" lay-verType="tips" placeholder="" autocomplete="off" class="layui-input" style="width: 100%">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">子设备数 <span class="layui-text-red">*</span></label>
        <div class="layui-input-block">
            <input type="text" id="node_num" name="node_num" lay-verify="number" lay-verType="tips" placeholder="" autocomplete="off" class="layui-input" style="width: 100%">
        </div>
    </div>


    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="btn_save" id="btn_save" value="确认">
    </div>
</form>

<form class="layui-form" lay-filter="form1" id="form1" style="padding: 10px;display:none;">
    <table class="layui-hide" id="table1" lay-filter="table1"></table>
</form>
</html>